<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">学生成绩查询</div>
      </template>
      <el-table :data="gradeStore.myGrades" stripe>
        <el-table-column prop="courseName" label="科目"></el-table-column>
        <el-table-column prop="score" label="成绩"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <span :style="{ color: scope.row.score < 60? 'red' : 'black' }">
              {{ scope.row.score < 60? '不及格' : '及格' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allGrades.length"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { useGradeStore } from '../stores/grade';
import { computed } from 'vue';

const gradeStore = useGradeStore();

const paginatedGrades = computed(() => gradeStore.paginatedGrades);
const currentPage = computed(() => gradeStore.currentPage);
const pageSize = computed(() => gradeStore.pageSize);
const allGrades = computed(() => gradeStore.myGrades);

const handleSizeChange = (newSize) => {
  gradeStore.setPageSize(newSize);
};

const handleCurrentChange = (newPage) => {
  gradeStore.setCurrentPage(newPage);
};
onMounted(() => {
  gradeStore.fetchMyGrades(); 
})
</script>

<style scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>
    